設定なしでデプロイできるZeit Now

#サーバーレス

奥

2019.08.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

みなさんはZeit Now（以下よりNowと記載）をご存知でしょうか。
シンプなデプロイを実現するPaaSのNowでついに設定なしでデプロイできるようになりました。

Now とは

一言でいうと、シンプルで簡単にそして高速なデプロイを実現するPaaSです。
極端な話をすると、nowと打つだけでデプロイが完了するくらいに簡単です。

他のPaaSと同様に、Node.js、Python、Goといった様々な言語が使用できフロントエンド、バックエンドのデプロイが可能です。
またデプロイ時に固有のURLが発行され、HTTPSのアクセスが可能です。

言葉だけでは伝わりきらない魅力を簡単なデモンストレーションでみていきましょう。

前準備

Nowを使ってデプロイする前準備をしていきます。
だいたい3ステップくらいで準備は完了します。

ユーザ登録

こちらからユーザ登録を行います。
GitHubアカウント、GitLabアカウントを用いたユーザ登録と、Eメールを用いたユーザ登録が可能です。
どの登録方法でも迷うことなく簡単に登録が可能です。

CLIのインストール

次にCLIツールをインストールします。
Node.jsがインストールされている環境で、下記コマンドを実行してください。

$ npm i -g now

CLIでのログイン

最後にCLI側でログイン作業を進めます。
now loginと入力した後に、先ほど登録したアカウントのメールアドレスを入力します。

$ now login
> Enter your email: [email protected]

入力すると下記のような内容が出力されます。
指示通りメールを確認して、メールに記述されているセキュリティーコードが出力されたものと合致していることを確認して認証を行います。
認証もメールの中のボタンを押すだけで終わります。

> We sent an email to [email protected]. Please follow the steps provided
inside it and make sure the security code matches .
⠦ Waiting for your confirmation

認証が終わると下記のような内容が出力されます。

✔ Email confirmed
> Ready! Authentication token and personal details saved in "~/.now"

これで準備が終わりました。
デプロイだけでなく、前準備も簡単に終わるので非常に便利です。　　

Nowを試す

準備ができたので実際にデプロイをしてみます。
デプロイする対象が欲しいので、Next.jsをセットアップして、Nowにデプロイしましょう。

Next.jsの設定

今回は簡単にするために一旦、create-next-appのみ実行します。

$ npx create-next-app now-sample-app
$ cd now-sample-app/

デプロイ

デプロイはシンプルです。nowと打ち込むだけです。
Now側の設定なしでデプロイできるのは、package.json内のbuildスクリプトを元にビルドとデプロイをしているからです。

また、デプロイ単位でURLが発行されますが、<プロジェクト名>.<ユーザ名>のエイリアスが同時に発行されるのでURLの固定も簡単です。
デプロイも出力にある通り、秒で終わってます。

$ now
> Deploying ~/Documents/github/now-sample-app under USERNAME
> Using project now-sample-ap
> https://now-sample-app-123456789.now.sh [v1] [1s]
> Ready! Deployed to https://now-sample-app.USERNAME.now.sh [in clipboard] [3s]

デプロイが無事に完了しました。URLに実際にアクセすると下記のような画面が表示されます。

zero-configuration-zeit-now-001

次はアップデートしてみましょう。

アップデート

testページを作ってみましょう。
下記のようにコードを書いていきます。

import React from 'react'

import Nav from '../components/nav'

const test = () => (
  <div>
    <Nav />
    <p>Test Page</p>
  </div>
)

export default test

アップデートしましょう。やることは先ほどと同じで、nowと打ち込むだけです。
やはりシンプルですね。

$ now
> Deploying ~/Documents/github/now-sample-app under USERNAME
> Using project now-sample-ap
> Synced 1 file (157B) [718ms]
> https://now-sample-app-123456789.now.sh [v2] [1s]
> Ready! Deployed to https://now-sample-app.USERNAME.now.sh [in clipboard] [3s]

https://now-sample-app.USERNAME.now.sh/testにアクセスしてみましょう。

zero-configuration-zeit-now-002